<template>
  <div class="appContainer">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="运输单号">
        <el-input v-model="formInline.cid" placeholder="运输单号"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
        title="新增运输单"
        :visible.sync="dialogVisible2"
        width="50%"
        :before-close="dialogClose">
      <el-form :inline="true" :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="司机id">
          <el-input v-model="formLabelAlign.diid" @change="findDriverById"></el-input>
        </el-form-item>
        <el-form-item label="司机姓名">
          <el-input disabled v-model="formLabelAlign.driverInformation.name"></el-input>
        </el-form-item>
        <el-form-item label="发货地">
          <!--          <el-input v-model="formLabelAlign.sendAddress"></el-input>-->
          <el-cascader
              :options="options"
              ref="cascaderAddr1"
              v-model="sendOptions"
              @change="sendChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="收货地">
          <!--          <el-input v-model="formLabelAlign.receiveAddress"></el-input>-->
          <el-cascader
              :options="options"
              ref="cascaderAddr2"
              v-model="receiveOptions"
              @change="receiveChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="发货时间">
          <el-date-picker
              v-model="formLabelAlign.shippingTime"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="到达时间">
          <el-date-picker
              v-model="formLabelAlign.arrivalTime"
              type="date"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="formLabelAlign.customerIn.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formLabelAlign.customerIn.tel"></el-input>
        </el-form-item>
        <el-form-item label="发货人">
          <el-input v-model="formLabelAlign.customerInformation.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formLabelAlign.customerInformation.tel"></el-input>
        </el-form-item>
        <el-form-item label="保险费">
          <el-input v-model="formLabelAlign.insurance"></el-input>
        </el-form-item>
        <el-form-item label="运费">
          <el-input v-model="formLabelAlign.fare"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="SubmitContract">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
        title="修改运输单"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="dialogClose">
      <el-form :inline="true" :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="司机id">
          <el-input v-model="formLabelAlign.diid" @change="findDriverById"></el-input>
        </el-form-item>
        <el-form-item label="司机姓名">
          <el-input disabled v-model="formLabelAlign.driverInformation.name"></el-input>
        </el-form-item>
        <el-form-item label="发货地">
<!--          <el-input v-model="formLabelAlign.sendAddress"></el-input>-->
          <el-cascader
              :options="options"
              ref="cascaderAddr1"
              v-model="sendOptions"
              @change="sendChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="收货地">
<!--          <el-input v-model="formLabelAlign.receiveAddress"></el-input>-->
          <el-cascader
              :options="options"
              ref="cascaderAddr2"
              v-model="receiveOptions"
              @change="receiveChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="发货时间">
          <el-date-picker
              v-model="formLabelAlign.shippingTime"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="到达时间">
          <el-date-picker
              v-model="formLabelAlign.arrivalTime"
              type="date"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="formLabelAlign.customerIn.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formLabelAlign.customerIn.tel"></el-input>
        </el-form-item>
        <el-form-item label="保险费">
          <el-input v-model="formLabelAlign.insurance"></el-input>
        </el-form-item>
        <el-form-item label="运费">
          <el-input v-model="formLabelAlign.fare"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="EditContract">确 定</el-button>
      </span>
    </el-dialog>

    <el-button type="danger" :disabled="disableDel" @click="deleteSelected" plain size="small" style="margin-bottom: 10px">删除此页所选</el-button>
    <el-button type="success" @click="addContract" plain size="small" style="margin-bottom: 10px" disabled>新增</el-button>

    <el-table
        :data="tableData"
        :header-cell-style="rowStyle"
        :cell-style="rowStyle"
        border
        stripe
        style="width: 100%"
        @select="selected"
        @selection-change="handleSelectionChange">

        <el-table-column
            fixed
            label="auto"
            type="selection"
            width="55">
        </el-table-column>

      <el-table-column
          prop="cid"
          label="运输单号"
          width="250">
      </el-table-column>
      <el-table-column
          v-if="false"
          prop="diid"
          label="司机id"
          width="100">
      </el-table-column>
      <el-table-column
          prop="driverInformation.name"
          label="司机"
          width="80">
      </el-table-column>
      <!--    <el-table-column-->
      <!--        prop="fid"-->
      <!--        label="货运单号"-->
      <!--        width="120">-->
      <!--    </el-table-column>-->
      <el-table-column
          prop="customerInformation.address"
          label="发货点"
          width="180">
      </el-table-column>
      <el-table-column
          prop="customerIn.address"
          label="收货点"
          width="180">
      </el-table-column>
      <el-table-column
          prop="shippingTime"
          label="起运时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="arrivalTime"
          label="到达时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="customerIn.name"
          label="收货人"
          width="80">
      </el-table-column>
      <el-table-column
          prop="customerIn.tel"
          label="电话"
          width="120">
      </el-table-column>
      <el-table-column
          prop="insurance"
          label="保险费"
          width="auto">
      </el-table-column>
      <el-table-column
          prop="fare"
          label="运费"
          width="auto">
      </el-table-column>
      <el-table-column

          label="状态"
          width="auto">
        <template slot-scope="scope">
          <span v-if="scope.row.freightStatus.status==0">待发货</span>
          <span v-if="scope.row.freightStatus.status==1">运输中</span>
          <span v-if="scope.row.freightStatus.status==2">中转</span>
          <span v-if="scope.row.freightStatus.status==3">已到货</span>
          <span v-if="scope.row.freightStatus.status==4">提货中</span>
          <span v-if="scope.row.freightStatus.status==5">已提货</span>
        </template>

      </el-table-column>
      <el-table-column
          v-if="false"
          prop="freightStatus"
          label="状态"
          width="auto">
      </el-table-column>
      <el-table-column
          v-if="false"
          prop="customerIn"
          label="收货人信息"
          width="auto">
      </el-table-column>
      <el-table-column
          v-if="false"
          prop="customerInformation"
          label="发货客户信息"
          width="auto">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="150">
        <template slot-scope="scope">
          <el-button @click="doEdit(scope.row)" type="primary" plain size="small">修改</el-button>
          <el-button :disabled="disableDel" @click="doDelete(scope.row)" type="danger" plain size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        style="margin-left: 280px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.currentPage"
        :page-sizes="[10, 3, 4]"
        :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize">

    </el-pagination>
  </div>

</template>


<script>
let pcas = require('../assets/pca-code.json')
export default {
  name: "TransferContractView",
  methods: {
    //设置居中
    rowStyle(){
      return "text-align:center";
    },

    //查找司机
    findDriverById(){
      this.axios.get("http://localhost:8080/driver/"+this.formLabelAlign.diid).then(
          res=>{
            this.formLabelAlign.driverInformation.name=res.data.data.name;
          }
      )
    },

    //返回选中数组
    selected(row){
      this.allToDelete.push(row[row.length-1].cid);
      console.log(this.allToDelete);
    },

    //修改与删除
    doEdit(row) {

      this.formLabelAlign = row;

      this.sendOptions = row.customerInformation.address.split(",");
      this.receiveOptions = row.customerIn.address.split(",");

      this.dialogVisible = true;
    },

    doDelete(row) {
      console.log(row);

      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.delete("http://localhost:8080/carriageContract/"+row.cid).then(
            res=>{
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              location.reload();
            }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //删除选中
    deleteSelected() {

      this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.delete("http://localhost:8080/carriageContract/"+this.allToDelete).then(
            res=>{
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              location.reload();
            }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //误触
    dialogClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },

    //新增合同窗口
    addContract(){
      this.formLabelAlign.diid = '';
      this.formLabelAlign.cid = '';
      this.formLabelAlign.senderid='';
      this.formLabelAlign.receiverid='';
      this.formLabelAlign.customerInformation = {
        id: '',
        tel: '',
        address: '',
        postalcode: '',
        customertype: '',
        uid: ''
      }
      this.formLabelAlign.driverInformation = {
        tel: '',
        numberPlate: '',
        type: '',
        id: '',
        lal: '',
        targetCity: '',
        status: '',
        uid: '',
        name: ''
      };
      this.formLabelAlign.customerIn={
        id: '',
        name: '',
        address: '',
        tel: ''
      }
      this.formLabelAlign.shippingTime = '';
      this.formLabelAlign.arrivalTime = '';
      this.formLabelAlign.insurance = '';
      this.formLabelAlign.fare = '';
      this.formLabelAlign.status='';
      this.formLabelAlign.sence='';

      this.receiveOptions=[]
      this.sendOptions=[]
      this.dialogVisible2 = true;
    },

    //修改合同
    EditContract(){
      console.log(this.formLabelAlign.cid);
      const loading = this.$loading({
        lock: true,
        text: '正在提交...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.dialogVisible = false;
      this.formLabelAlign.driverInformation.targetCity = this.formLabelAlign.customerIn.address;
      this.formLabelAlign.customerInformation.address = this.sendOptions[0]+","+this.sendOptions[1]+","+this.sendOptions[2];
      this.formLabelAlign.customerIn.address = this.receiveOptions[0]+","+this.receiveOptions[1]+","+this.receiveOptions[2];
      this.axios.put("http://localhost:8080/carriageContract",this.formLabelAlign).then(
          res => {
            if(res.data.code==200){
              loading.close();
              this.$message.success("提交成功");
              location.reload();
            }else {
              loading.close();
              this.$message.error("提交失败");
            }
          }
      ).catch(
          err => {
            loading.close();
            this.$message.error("提交失败");
          }
      )
    },

    //新增合同
    SubmitContract(){
      console.log(this.formLabelAlign);
      const loading = this.$loading({
        lock: true,
        text: '正在提交...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.formLabelAlign.customerInformation.address = this.sendOptions[0]+","+this.sendOptions[1]+","+this.sendOptions[2];
      this.formLabelAlign.customerIn.address = this.receiveOptions[0]+","+this.receiveOptions[1]+","+this.receiveOptions[2];
      this.axios.post("http://localhost:8080/carriageContract",this.formLabelAlign).then(
          res => {
            if(res.data.code==200){
              loading.close();
              this.dialogVisible2 = false;
              this.$message.success("提交成功");
              location.reload();
            }else {
              loading.close();
              this.$message.error("提交失败");
              console.log(res)
            }
          }
      ).catch(
          err => {
            loading.close();
            this.$message.error("提交失败");
          }
      )
    },

    onSearch() {
      const loading = this.$loading({
        lock: true,
        text: '正在查询..',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.axios.get("http://localhost:8080/carriageContract/search?"+this.tansParams(this.formInline)).then(
          res => {
            if(res.data.code==200){
              loading.close();
              this.tableData = res.data.data.list;
              this.totalSize = res.data.data.total;
              this.$message.success("查询成功");
              console.log(res.data.data);
            }else {
              loading.close();
              this.$message.error("查询失败");
            }
          }
      ).catch(
          err => {
            loading.close();
            this.$message.error("查询失败");
          }
      )
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 获取省市区地址级联
    sendChange(thsAreaCode) {
      thsAreaCode = this.$refs['cascaderAddr1'].getCheckedNodes()[0].pathLabels// 注意2： 获取label值
      // 注意3： 最终结果是个一维数组对象
      this.formLabelAlign.sendAddress = thsAreaCode[0] + thsAreaCode[1] + thsAreaCode[2];
      // console.log(this.sendOptions);
    },
    receiveChange(thsAreaCode) {
      thsAreaCode = this.$refs['cascaderAddr2'].getCheckedNodes()[0].pathLabels// 注意2： 获取label值
      // 注意3： 最终结果是个一维数组对象
      this.formLabelAlign.receiveAddress = thsAreaCode[0] + thsAreaCode[1] + thsAreaCode[2];
    },

    //分页查询
    findByPage(){
      const loading = this.$loading({
        lock: true,
        text: '正在查询..',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.axios.get("http://localhost:8080/carriageContract/list?"+this.tansParams(this.formInline)).then(
          res => {
            if(res.data.code==200){
              loading.close();
              this.tableData = res.data.data.list;
              this.totalSize = res.data.data.total;
              this.$message.success("查询成功");
              console.log(res.data.data);
            }else {
              loading.close();
              this.$message.error("查询失败");
            }
          }
      ).catch(
          err => {
            loading.close();
            this.$message.error("查询失败");
          }
      )
    },
    //分页
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.findByPage();
    },
    handleCurrentChange(val) {
      this.formInline.currentPage = val;
      this.findByPage();
    },
    tansParams(params) {
      let result = ''
      for (const propName of Object.keys(params)) {
        const value = params[propName];
        var part = encodeURIComponent(propName) + "=";
        if (value !== null && typeof (value) !== "undefined") {
          if (typeof value === 'object') {
            for (const key of Object.keys(value)) {
              if (value[key] !== null && typeof (value[key]) !== 'undefined') {
                let params = propName + '[' + key + ']';
                var subPart = encodeURIComponent(params) + "=";
                result += subPart + encodeURIComponent(value[key]) + "&";
              }
            }
          } else {
            result += part + encodeURIComponent(value) + "&";
          }
        }
      }
      return result
    }
  },

  created(){
    this.findByPage(this.currentPage,this.pageSize);
  },

  data() {
    return {
      totalSize:10,
      options: pcas,
      sendOptions: [],
      receiveOptions: [],
      disableDel:false,
      allToDelete:[],
      formLabelAlign: {
        cid: '',
        diid:'',
        customerInformation: {
          id: '',
          tel: '',
          address: '',
          postalcode: '',
          customertype: '',
          uid: '',
          name:''
        },
        customerIn: {
          id: '',
          name: '',
          address: '',
          tel: ''
        },
        driverInformation: {
          tel: '',
          numberPlate: '',
          type: '',
          id: '',
          lal: '',
          targetCity: '',
          status: '',
          uid: '',
          name: ''
        },
        shippingTime:'',
        arrivalTime:'',
        insurance:'',
        fare:'',
        fid:'',
        status:'',
        freightStatus: {
          id:'',
          status:'',
          receiveAddress:'',
          iscollection:''
        },
        sence:'',
        senderid:'',
        receiverid:'',
      },
      labelPosition: 'right',
      dialogVisible: false,
      dialogVisible2: false,
      formInline: {
        currentPage: 1,
        pageSize:10,
        cid: '',

      },
      tableData: [
      //     {
      //   cid: 'a5b846f6d5f3ce6145458bc',
      //   diid:'153213516',
      //   driverName: '王小虎',
      //   sendAddress: '上海市,市辖区,黄浦区',
      //   receiveAddress: '四川省,成都市,锦江区',
      //   shippingTime:'2022-10-10',
      //   arrivalTime:'2022-10-15',
      //   receiver:'赵四',
      //   tel:'15566667777',
      //   insurance:'50',
      //   fare:'200',
      //   status:'',
      //   sence:'',
      //   fid:'',
      //   receiverid:'',
      // }
      ],
    }
  },

}
</script>

<style scoped>
  .appContainer{
    text-align: left;
  }
  el-table-column{

  }
</style>